<template>
  <div class="Fontsize">
    <div class="fontcontent" :style="{'background-color':Styles.backgroundColor,color:Styles.iconColor}">
      <div class="first-div" :style="{borderColor:Styles.borderColors}" ref="firstDiv">
        <div class="div" :style="{color:Styles.iconColor}"><i class="iconfont icon-zitidaxiao-icon"></i>字体大小</div>
        <div class="div Sizi">
          <div class="min" @click.stop="Siziclick(0)">A</div>
          <div class="Sizi-bg" ref="SiziBg" @touchstart="SiziStart" @touchmove="SiziMove" @touchend="SiziEnd">
            <div class="spans"
                 :style="{ 'left': fontSizeval+'%',backgroundColor:Styles.iconColor,transform:'scale('+scale+')',border:Styles.mode===2?'0.5rem solid #4d4d4d':'0.5rem solid #fff'}"></div>
            <div class="ruler" :style="{borderColor:Styles.iconColor}">
            </div>
            <div class="rulers">
              <div class="cm" :style="{borderColor:Styles.iconColor}"><i @click.stop="Siziclick(0)"></i></div>
              <div class="cm" :style="{borderColor:Styles.iconColor}"><i @click.stop="Siziclick(1)"></i></div>
              <div class="cm" :style="{borderColor:Styles.iconColor}"><i @click.stop="Siziclick(2)"></i></div>
              <div class="cm" :style="{borderColor:Styles.iconColor}"><i @click.stop="Siziclick(3)"></i></div>
            </div>
          </div>
          <div class="max" @click.stop="Siziclick(5)">A</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "index",
    data: function () {
      return {
        fontSizeval: this.TenFontSizi.fontSizeval,
        scale: 1,
        Sizetouch: {
          x: 0,
          startProgress: 0
        },
      }
    },
    props: ['Styles','TenFontSizi'],
    mounted: function () {

    },
    methods: {
      SiziStart: function (e) {
        this.scale = 1.2
        this.Sizetouch.x = e.changedTouches[0].clientX
        this.Sizetouch.startProgress = this.fontSizeval
      },
      SiziMove: function (e) {
        this.scale = 1.2
        e && e.preventDefault()
        let touch = e.changedTouches[0]
        let offsetX = touch.clientX - this.Sizetouch.x
        let targetWidth = this.$refs.SiziBg.offsetWidth
        var fontSize = (Number((offsetX / targetWidth * 100).toFixed(2))) + this.Sizetouch.startProgress
        if (fontSize >= 100 || fontSize >= 90 && fontSize <= 100) {
          this.fontSizeval = 100
          this.fontSize = 27
        } else if (fontSize >= 20 && fontSize < 40) {
          this.fontSizeval = 25
          this.fontSize = 15
        } else if (fontSize >= 40 && fontSize < 70) {
          this.fontSizeval = 50
          this.fontSize = 18
        } else if (fontSize >= 70 && fontSize < 90) {
          this.fontSizeval = 75
          this.fontSize = 21
        } else if (fontSize <= 0 || fontSize >= 0 && fontSize < 20) {
          this.fontSizeval = 0
          this.fontSize = 12
        }
        var obj = {
          fontSize: this.fontSize,
          fontSizeval: this.fontSizeval
        }
        this.PlayStyle(obj)
      },
      SiziEnd: function (e) {
        this.scale = 1
      },
      Siziclick: function (num) {
        this.fontSizeval = num * 25 > 100 ? 100 : num * 25
        this.fontSize = (24 + (6 * num)) / 2
        var obj = {
          fontSize: this.fontSize,
          fontSizeval: this.fontSizeval
        }
        this.PlayStyle(obj)
      },
      PlayStyle: function (obj) {

        this.$emit('TenFontSizi', obj)
        // localStorage.setItem('PlayingStyle', JSON.stringify(obj))
      },
    }
  }
</script>

<style scoped>
  @import "./css/index.css";
</style>
